<template>
    <div :style="styles" :id="id"></div>
</template>
    
<script>

import * as echarts from 'echarts/core';
import {BarChart, PieChart} from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DatasetComponent
} from 'echarts/components';
import {
  CanvasRenderer
} from 'echarts/renderers';
echarts.use(
  [
    TitleComponent,
    TooltipComponent,
    GridComponent,
    BarChart,
    PieChart,
    LegendComponent,
    DatasetComponent,
    CanvasRenderer
  ]
);
export default {
    name: 'ChartBar3',
    components: {
    },
    props: {
        id:{
            default: 'myChart4'
        },
        styles: {
            default: { width: '100%', height: '100%' }
        },
        allList: {
            default: [{ value: 147, name: "带看次数" }, { value: 147, name: "房源跟进" }, { value: 147, name: "客源跟进" },
            { value: 147, name: "新增房源" }, { value: 147, name: "新增客源" }]
        },
        bottomList: {
            default: ['带看次数', '房源跟进', '客源跟进', '新增房源', '新增客源']
        },
        countList: {
            default: [13, 20, 5, 15, 11]
        },
        title: {
            default: 'TOP5'
        },
    },
    data() {
        return {
        }
    },
    mounted() {
        this.draw();
    },
    methods: {
        draw() {
            let myChart = echarts.init(document.getElementById(this.id))
            myChart.setOption({
                legend: {
                    // 图例
                    data: this.bottomList,
                    right: "0%",
                    top: "30%",
                    orient: "vertical"
                },
                title: {
                    // 设置饼图标题，位置设为顶部居中
                    text: this.title,
                    top: "5%",
                    left: "center"
                },
                color: ['#45C2E0', '#04e189', '#009dff', '#3bffd4', '#22e4ff', '#C1EBDD'],
                series: [
                    {
                        type: "pie",
                        label: {
                            show: true,
                            formatter: "{c} ({d}%)" // b代表名称，c代表对应值，d代表百分比
                            // formatter: "{b} : {c} ({d}%)" // b代表名称，c代表对应值，d代表百分比
                        },
                        radius: ['25%', '35%'], //饼图半径
                        right:'15%',
                        selectedMode:'single',
                        data: this.allList
                    }
                ]
            });
        }

    },
    watch: {
    },
    computed: {
    }

}
</script>
    
<style scoped>
</style>